<template>
  <div class="mobile clearfix">
    <MobileHeader />
    <div class="clear hei40"></div>
    <div class="con-width-1200 content">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel course">ExpertTeam</h2>
        <h1 class="">专家团队</h1>
        <div class="catage clearfix">您所在位置：首页 > 专家团队 > 列表</div>
      </div>
    </div>
    <div class="list-block mobile clearfix">
      <div class="list clearfix">
        <div class="item" v-for="(item, index) in imgList" :key="index">
          <img title :src="item.toux" @click="jump(item.id)" />
          <div class="info">
            <div class="inline">
              <div class="h2">{{ item.xingm }}</div>
              <div class="p">{{ item.jianj | ellipsis }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="r-top rad5" @click="$router.go(-1)">
      <i class="iconfont icon-fanhuidingbu"></i>
      <a>返回上级</a>
    </div>

    <MobileFooter />
  </div>
</template>
  
<script>
import MobileHeader from './MobileHeader.vue'
import MobileFooter from "./MobileFooter";
import _http from "../httpService";

export default {
  name: "HospitalSummedup",
  props: {
    msg: String,
  },
  components: {
    MobileHeader,
    MobileFooter
  },
  data() {
    return {
      dataList: [],
      imgList: [],
      isDisable: false,
      name: "",
      mobile: "",
      content: "",
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 25) {
        return value.slice(0, 25) + "...";
      }
      return value;
    },
  },
  methods: {
    jump: function (id) {
      this.$router.push({ path: "/mobileZhuanjxq/" + id });
    },
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route() {
      _http
        .get(
          "/zhuanjjslb/zhuanjjs/queryZhuanjjsZjByMainId?id=" +
          this.$route.params.id +
          "&pageNo=" +
          this.pageNo +
          "&pageSize=" +
          this.pageSize
        )
        .then((resp) => {
          if (resp.data.success) {
            this.imgList = resp.data.result;
          }
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
    immediate: true,
  },
  created() {
    // 初始化加载栏目等数据
    _http
      .get(
        "/zhuanjjslb/zhuanjjs/queryZhuanjjsZjByMainId?id=" +
        this.$route.params.id
      )
      .then((resp) => {
        if (resp.data.success) this.imgList = resp.data.result;
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/public.css";
@import "../assets/css/public.scss";

.mobile .list-block,.con-width-1200, .commen {
  width: 100% !important;
}
.mobile .public-title .catage{
  margin:15px 0px 10px 20px;
  font-size:14px;
  height:30px;
  line-height: 30px;
  float: left;
}
.mobile .public-title{
  margin:0px;
  height:120px;
}
.list-block.mobile .list{
  padding:0px 10px;
}

.list-block.mobile .list .item {
  display: flex;
  width:48%;
  margin:1%;
  overflow: hidden;
  position: relative;
  float: left;
  align-items: center;
  justify-content: center;

}

.list-block.mobile .list .item img {
  height:300px;
}

.list-block.mobile .item .info {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  text-align: center;
  min-height: 97px;
}

.list-block.mobile .item .inline {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
}

.list-block.mobile .item .h2 {
  font-size: 18px;
  color: #fff;
}

.list-block.mobile .item .p {
  font-size: 14px;
  color: #fff;
  line-height: 22px;
  margin-top: 8px;
}
</style>
  